<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{ margin: 0px;
           padding: 0px;
           list-style: none;
        }
        .header{
            height: 67px;
            background-color: rgb(0, 128, 128);
            border-bottom: 1px solid red;
        }
        .header .left{
            width: 307px;
            height: 67px;
            float: left;
        }
        .header .right{
            height: 63px;
            width: 870px;
        }
        .banner{
            height: 514px;
            width: 1210px;
            background-color: #f5f5f5;
            margin: 25px auto;
        }
        .list{
            height: 36px;
            width: 1210px;
            background-color: #f5f5f5;
            margin: 25px auto;
        }
        .con{
            height: 970px;
            width: 1210px;  
            background-color: #f5f5f5;
            margin: 0px auto 11px auto;
        }
        .more{
             height: 37px;
             width: 1210px;
             background-color: #f5f5f5;
             margin : 0px auto;
             text-align:center;
             line-height: 38px;
        }
        .header .left h1{
            height: 14px;
            width: 17px;
            position: relative;
            float: left;
            margin: 10px  0px 28px 35px;
        }
        .header li{
            height: 47px;
            width: 47px; 
            float: left;  
            margin: 24px 16px 18px 0px ;
            
        }
        .header span{
            position: absolute;
            height: 36px;
            width: 36px;
            text-align: center; 
        }
        .header i{
            height: 60px;
            width: 60px;
            float: right;
            margin :auto  ;
        }

        .banner zuo{
            height: 510px;
            width: 910px;
            background-color: #f5f5f5;
            float: left;
        }
        .banner you{
            height: 514px;
            width: 276px;
            background-color: #f5f5f5(0, 247, 255);
            float: right;
        }
        .banner you li  {
            height: 162px;
            width: 276px;
            margin: 0px;
            margin-bottom: 14px;
            padding: 0px;
            
        }
        .banner you li img{
            height: 162px;
            width: 276px;
        }
        .list li{
            height: 37px;
            width: 132px;
            border: 1px solid black;
            float: left;
            font-size: 19px;
            margin: auto 10px;
        }
        .con li{
            width: 268px;
            float: left;
            background: whitesmoke;
            height: 326px;
            font-weight:bold;
            font-size: 17px;
            margin: 0px 8px 0px ;
        }
        .con li span{
            font-size: 15px;
            float:right;
            width: 250px;
            height: 100px;
        }
        .con li c{
            font-weight: bold;
            font-size: 17px;
            color: #737373;
        }
        .con li d{
                text-decoration: none;
                margin: 70px;
                font-size: 17px;
                color: #737373;
                font-weight: normal;
            }
        .right li span{
            border-radius: 50%;
            background: yellow;
            height: 37px;
            width: 37px;
        }
        .header i{ 
            width: 50px;
            height: 50px;
            margin-top: 20px;
        }
        .footer{
            width: 1210px;
            height: 354px;
            margin: 0px auto;
        }
        .footer img {
            width: 162px;
            height: 49px;
            margin: 45px 8px 8px 2px;
            float: left;
        }
        .footer li span {
            margin: 50px 954px 47px 51px;
            float: left;
            font-size: 18px;
            color: #737373;
        }
        .footer li{
            margin: 0px 50px 50px 50px ;
        }
        
    </style>
</head>
<body>
     <div class="header">
         <i>登录</i>
         <div class="left">
             <h1>
               三
             </h1>
            </div>
         <div class="right">
         <ul>
             <li> <span>赞</span> </li>
             <li><span>萌</span></li>
             <li><span>哈</span></li>
             <li> <span>艹</span> </li>
             <li> <span>买</span> </li>
         </ul>
        </div>
     <div class="banner">
         <zuo>
         <img src="images/s003.jpg" alt="">
         </zuo>
         <you>
         <ul>
             <li><img src="images/i02.jpg" alt=""></li>
             <li><img src="images/i03.jpg" alt=""></li>
             <li><img src="images/i04.jpg" alt=""></li>
         </ul>
         </you>
     </div>
     <ul class="list">
             <li>
             最新
             </li>
             <li>
              最热
             </li>
             <li>
             热议
             </li>
             <li>
             随机
             </li>
     </ul>
     <div class="bootom">
     <ul class="con">
        <li>
            <img src="images/i01.jpg" alt="">
            <span>用水才能擦去笔记，它只想保护好设计师的创意</span>
            <br><br>
            <c>
                1天前
            </c>
            <d>
                422
            </d>
        </li>
        <li>
            <img src="images/i02.jpg" alt="">
            <span>马桶刷也要有优雅的姿态</span>
            <br><br>
            <c>
                1天前
            </c>
            <d>
                422
            </d>
        </li>
        <li>
            <img src="images/i03.jpg" alt="">
            <span>健身也走科技范，你以为这仅仅只是个瑜伽垫？</span>
            <br><br>
            <c>
                1天前
            </c>
            <d>
                422
            </d>
        </li>
        <li>
            <img src="images/i04.jpg" alt="">
            <span>牙缝清洁怎么办？牙签牙线都过时了，用刷子刷吧</span>
            <br><br>
            <c>
                1天前
            </c>
            <d>
                422
            </d>
        </li>
        <li>
            <img src="images/i05.jpg" alt="">
            <span>矮怎么了？照样能拿到书架顶端的书</span>
            <br><br>
            <c>
                1天前
            </c>
            <d>
                422
            </d>
        </li>
        <li>
            <img src="images/i06.png" alt="">
            <span>这简直是一场关于肉体的盛宴，无关设计，无关时尚，无关商业......</span>
            <br><br>
            <c>
                1天前
            </c>
            <d>
                422
            </d>
        </li>
        <li>
            <img src="images/i07.png" alt="">
            <span>中国国际设计节PK世界工业设计大会，哪个更棒？</span>
            <br><br>
            <c>
                1天前
            </c>
            <d>
                422
            </d>
        </li>
        <li>
            <img src="images/i08.jpg" alt="">
            <span>首届世界工业设计大会开在家门口杭州，中国设计师们燥起来</span>
            <br><br>
            <c>
                1天前
            </c>
            <d>
                422
            </d>
        </li>
        <li>
            <img src="images/i09.jpg" alt="">
            <span>窝在北方的暖炉里，你应该需要一个散热阀门？</span>
            <br><br>
            <c>
                1天前
            </c>
            <d>
                422
            </d>
        </li>
        <li>
            <img src="images/i10.jpg" alt="">
            <span>废纸打造的铅笔，像是一朵朵落入凡间的花</span>
            <br><br>
            <c>
                1天前
            </c>
            <d>
                422
            </d>
        </li>
        <li>
            <img src="images/i11.jpg" alt="">
            <span>依靠在毯子上，这件事听着就让人舒坦</span>
            <br><br>
            <c>
                1天前
            </c>
            <d>
                422
            </d>
        </li>
        <li>
            <img src="images/i12.jpg" alt="">
            <span>别笑话虚拟键盘没有实体按键，打字or音乐，他们说变就能变</span>
            <br><br>
            <c>
                1天前
            </c>
            <d>
                422
            </d>
        </li>
     </ul>
    </div>
     <p class="more">太快了吧，慢慢来</p>
     <div class="footer">
        <ul>
            <li>
                <span>合作伙伴</span>
            </li>
            <li><img src="images/x01.png" alt=""></li>
            <li><img src="images/x02.png" alt=""></li>
            <li><img src="images/x03.png" alt=""></li>
            <li><img src="images/x04.png" alt=""></li>
            <li><img src="images/x05.png" alt=""></li>
            <li><img src="images/x06.png" alt=""></li>
            <li><img src="images/x07.jpg" alt=""></li>
        </ul>
    </div>
</body>
</html>